<template>
  <div>
      <el-table :data="listData" v-if="listData.length > 0">
        <el-table-column label="所属车场" align="left" prop="parkingName" />
        <el-table-column label="所属车位" align="left" prop="carportName" />
        <el-table-column label="车牌号" align="left" prop="plateNum" />
        <el-table-column label="车牌品牌" align="left" prop="vehicleBrand"/>
        <el-table-column label="车辆识别码" align="left" prop="vehicleDiscern"/>
      </el-table>
      <el-empty v-else :image-size="50" description="暂无绑定车辆信息">
        <el-link type="primary">绑定客户车辆</el-link>
      </el-empty>
  </div>
</template>

<script>
  import { listVehicle } from "@/api/property/vehicle";
  export default {
    name: "vehicleInfo",
    data() {
      return {
        //车辆
        listData: [],
        queryParams: {
          ownerId: null
        },
      }
    },
    watch: {
      customForm() {
        this.initForm()
      }
    },
    created() {
      this.initForm
    },
    methods: {
      initForm() {
        this.queryParams.ownerId = this.customForm.customId
        listVehicle(this.queryParams).then(res => {
          this.listData = res.rows
        })
      },
    },
    props: {
      customForm: {
        type: Object,
        default: () => {
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: #f2f2f2 !important;
  }

</style>
